<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="用户名称">
        <el-input v-model="user.username" required />
      </el-form-item> 

      <el-form-item label="别名">
        <el-input v-model="user.othername" required />
      </el-form-item> 

      <el-form-item label="密码">
        <el-input type="password" required v-model="user.password" />
      </el-form-item>

      <el-form-item label="性别">
        <el-select v-model="user.sex" clearable placeholder="请选择">
          <el-option :value="1" label="男" />
          <el-option :value="2" label="女" />
        </el-select>
      </el-form-item>

      <el-form-item label="类型">
        <el-select v-model="user.type" clearable placeholder="请选择">
          <el-option :value=1 label="学生" />
        </el-select>
      </el-form-item>

      <!-- TODO 远程搜索系别 和 班级 -->
      <el-form-item label="系别">
        <el-input v-model="user.department" :disabled="disabledFlag" />
      </el-form-item>

      <el-form-item label="专业">
        <el-input v-model="user.major" :disabled="disabledFlag" />
      </el-form-item>

      <el-form-item label="班级">
        <el-input v-model="user.grade" :disabled="disabledFlag" />
      </el-form-item>

      <el-form-item label="邮箱">
        <el-input v-model="user.email" type="email" required />
      </el-form-item>

      <el-form-item label="手机">
        <el-input v-model="user.mobilephone" type="tel" required />
      </el-form-item>

      <!-- 头像：TODO -->

      <el-form-item>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          @click="saveOrUpdate"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import userApi from "@/api/user";
import stuApi from "@/api/student";

export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
        sex: "",
        type: 1,
        department: "",
        grade: "",
        email: "",
        mobilephone: "",
      },
      saveBtnDisabled: false, // 保存按钮是否禁用,
      disabledFlag: false,
    };
  },
  created() {
    // 页面渲染之前执行
    this.init();
  },
  watch: {
    //监听
    $route(to, from) {
      // console.log(to)
      // console.log(from)
      //路由变化方式，路由发生变化，方法就会执行
      this.init();
    },
    "user.sex": {

      handler(val, oldval) {
        console.log(val, oldval);
      }
    },
    "user.type": {
      handler(val, oldval) {
        console.log(val, oldval);
        if(val === 3) {
            this.user.department = ""
            this.user.grade = ""
            this.disabledFlag = true
        } else {
            this.disabledFlag = false
        }
      },
    },
  },
  methods: {
    init() {
      //判断路径有id值,做修改
      if (this.$route.params && this.$route.params.id) {
        //从路径获取id值
        const id = this.$route.params.id;
        //调用根据id查询的方法
        this.getInfo(id);
      } else {
        //路径没有id值，做添加
        //清空表单
        this.user = {};
      }
    },
    //获取用户信息
    getInfo(id) {
      userApi.getUserInfo(id).then((response) => {
        this.user = response.data.user;
      });
    },

    saveOrUpdate() {
      //判断修改还是添加
      //根据user是否有id
      if (!this.user.id) {
        //添加
        this.saveUser();
      } else {
        //修改
        this.updateUser();
      }
    },

    saveUser() {
      stuApi.addStudent(this.user).then((response) => {
        //提示信息
        this.$message({
          type: "success",
          message: "添加成功!",
        });
        //回到列表页面 路由跳转
        this.$router.push({ path: "/student/list" });
      });
    },
    updateUser() {
      userApi.updateUserInfo(this.user).then((response) => {
        //提示信息
        this.$message({
          type: "success",
          message: "更新成功!",
        });
        //回到列表页面 路由跳转
        this.$router.push({ path: "/student/list" });
      });
    },
  },
};
</script>

<style>
</style>